<template>
  <aside class="fixed top-16 bottom-12 left-0 w-64 border-r z-30">
    <div class="p-4">
      <h3 class="text-lg font-semibold mb-4">文档目录</h3>
      <!-- <UVerticalNavigation :links="menuItems" /> -->
      <nav>
        <ul v-if="data">
          <li v-for="item in data" :key="item.path">
            <NuxtLink :to="item.path">{{ item.title }}</NuxtLink>
            <ul v-if="item.children">
              <li v-for="child in item.children" :key="child.path">
                <NuxtLink :to="child.path">{{ child.title }}</NuxtLink>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </aside>
</template>

<script setup  lang="ts">
const { data } =  useAsyncData('navigation', () => {
  return queryCollectionNavigation('content')
})

// 遍历 data 在 console 中输出每个 item 的 path 和 title ，定义为一个函数，点击按钮打印
function printMenuItems() {
  if (data.value) {
    data.value.forEach(item => {
      console.log(`Path: ${item.path}, Title: ${item.title}`);
      if (item.children) {
        item.children.forEach(child => {
          console.log(`  Child Path: ${child.path}, Title: ${child.title}`);
        });
      }
    });
  } else {
    console.log('No menu items found.');
  }
}

</script>